<template>
  <div class="h-full grid grid-cols-2 grid-rows-2 gap-6">
    <!-- <ParameterTrendCard
      v-for="parameter in parameters"
      :key="parameter"
      :parameter="parameter"
      :historical-data="historicalData"
      :loading="loading"
    /> -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import ParameterTrendCard from './ParameterTrendCard.vue'
import type { HistoricalPhysiologicalData } from '@/types/physiological'
import { getRealtimePhysiologicalData } from '@/api/physiological'
import { useUserStore } from '@/store/user'

const loading = ref(false)
const historicalData = ref()

/**
 * 需要显示的参数列表
 */
const parameters = ['temperature', 'heartRate', 'systolic', 'oxygenSaturation'] as const

/**
 * 加载当天历史数据
 */
const loadHistoricalData = async () => {
  loading.value = true
  try {
    const userStore = useUserStore()
    const { data } = await getRealtimePhysiologicalData({
      userId: userStore.userId,
      limit: 10,
      page: 1
    })
    // historicalData.value = data?.list
    historicalData.value = [
      {
        bodyTemperature: 36.8,
        heartRate: 70,
        bloodPressure: '120/80',
        oxygenSaturation: 95,
        startTime: '2025-10-28T15:10:44',
        endTime: '2025-10-28T15:10:44'
      },
      {
        bodyTemperature: 35.8,
        heartRate: 70,
        bloodPressure: '120/80',
        oxygenSaturation: 95
      },
      {
        bodyTemperature: 34.8,
        heartRate: 70,
        bloodPressure: '120/80',
        oxygenSaturation: 95
      }
    ]
  } catch (error) {
    console.error('获取历史生理体征数据失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(async () => {
  await loadHistoricalData()
})
</script>
